import React, { Suspense } from 'react';
import './style/antd.css';
import { Route, Routes, HashRouter } from 'react-router-dom';
import routeMain from './router/index';
import Loading from '@/router/config/loading';
import ErrorBoundary from '@/page/ErrorBoundary';

const App = () => {
  //路由
  function renderComponent(routeList) {
    return routeList.map((item, index) => {
      if (item.children) {
        return (
          <Route key={index} path={item.path} exact={item.exact} element={<item.element route={item} />}>
            {renderComponent(item.children)}
          </Route>
        );
      } else return <Route key={index} path={item.path} exact={item.exact} element={<item.element route={item} />}></Route>;
    });
  }
  return (
    <Suspense fallback={<Loading />}>
      <ErrorBoundary>
        <HashRouter>
          <Routes>{renderComponent(routeMain)}</Routes>
        </HashRouter>
      </ErrorBoundary>
    </Suspense>
  );
};

export default App;
